unlockDialog: Tweak transition animation

The current transition between clock and auth prompt uses a simple
crossfade.

"What kind of spatial model is that?!"
                                  T.B.

Root the transition a bit more by adding translation and scale to
the animation.

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/972

diff --git a/js/ui/unlockDialog.js b/js/ui/unlockDialog.js
index deee9b31538871b96d7d068694c5d96529b878a7..797e55e637c5d379b4c6f99c511bbc017d77f1eb 100644 (file)
--- a/js/ui/unlockDialog.js
+++ b/js/ui/unlockDialog.js
@@ -17,6 +17,8 @@ const IDLE_TIMEOUT = 2 * 60;
 const SCREENSAVER_SCHEMA = 'org.gnome.desktop.screensaver';
 
 const CROSSFADE_TIME = 300;
+const FADE_OUT_TRANSLATION = 200;
+const FADE_OUT_SCALE = 0.3;
 
 const BLUR_BRIGHTNESS = 0.55;
 const BLUR_SIGMA = 60;
@@ -448,9 +450,11 @@ var UnlockDialog = GObject.registerClass({
         let stack = new Shell.Stack();
 
         this._promptBox = new St.BoxLayout({ vertical: true });
+        this._promptBox.set_pivot_point(0.5, 0.5);
         stack.add_child(this._promptBox);
 
         this._clock = new Clock();
+        this._clock.set_pivot_point(0.5, 0.5);
         stack.add_child(this._clock);
         this._showClock();
 
@@ -577,8 +581,13 @@ var UnlockDialog = GObject.registerClass({
         this._activePage = this._clock;
         this._clock.show();
 
+        const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+
         this._promptBox.ease({
             opacity: 0,
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: FADE_OUT_TRANSLATION * scaleFactor,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => {
@@ -587,8 +596,17 @@ var UnlockDialog = GObject.registerClass({
             },
         });
 
+        this._clock.set({
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
+        });
+
         this._clock.ease({
             opacity: 255,
+            scale_x: 1,
+            scale_y: 1,
+            translation_y: 0,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });
@@ -603,8 +621,19 @@ var UnlockDialog = GObject.registerClass({
         this._activePage = this._promptBox;
         this._promptBox.show();
 
+        const { scaleFactor } = St.ThemeContext.get_for_stage(global.stage);
+
+        this._promptBox.set({
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: FADE_OUT_TRANSLATION * scaleFactor,
+        });
+
         this._clock.ease({
             opacity: 0,
+            scale_x: FADE_OUT_SCALE,
+            scale_y: FADE_OUT_SCALE,
+            translation_y: -FADE_OUT_TRANSLATION * scaleFactor,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => this._clock.hide(),
@@ -612,6 +641,9 @@ var UnlockDialog = GObject.registerClass({
 
         this._promptBox.ease({
             opacity: 255,
+            scale_x: 1,
+            scale_y: 1,
+            translation_y: 0,
             duration: CROSSFADE_TIME,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
         });